// *************************************加载分类数据
let form = layui.form;
let layer = layui.layer;
$.ajax({
  url: "/my/article/cates",
  success: function(res) {
    if (res.status == 0) {
      let str = `<option value="">请选择文章类别</option>`;
      res.data.forEach(item => {
        str += `<option value="${item.Id}">${item.name}</option>`;
      });
      $("select").html(str);

      // form模块：如果表单元素动态插入，好看样式不会跟着动态渲染；
      // 需要调用渲染更新方法；
      form.render("select");
    }
  }
});



// **************************************初始化富文本编辑器
// 官方演示：
tinymce.init({
  selector: '.layui-textarea',
  language: 'zh_CN',
  // 其他配置：需要查文档；
});


// 配置好：对应文档查下每个配置项都是什么功能；
// initEditor()  来自tinymce/tinymce_setup.js 不是官方的，自己封装的！



// ****************************************图片插件初始化
// 按照文档，引入
$('#image').cropper({
  // 纵横比(宽高比)
  aspectRatio: 1, // 正方形

  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
});

// 用有样式按钮代替原生按钮
$(".upload-btn").click(function() {
  $("#file").click();
});


// 原生按钮选择文件状态发生改变时：
$("#file").on("change", function() {

  // 1.获取图片对象；了解
  let obj = this.files[0];


  // 2.专门方法，把图片对象转化为临时URL地址: 了解
  let url = URL.createObjectURL(obj);


  // 3.替换到上面图片位置   查文档 了解
  $('#image').cropper("replace", url);
});




// ***************************************发布
// 1.注册提交事件
$("form").on("submit", function(e) {
  e.preventDefault();

  // 2.收集数据：FormData;  
  let fd = new FormData(this);

  // 如何查看已经收到内容呢？发现插件初始化两个部分，没有收集!
  // fd.forEach(function(val, key) {
  //   console.log(val, key);
  // })


  // 3.手动收集  文本 、图片对象都是插件方法（了解，需要收集）
  // append()  添加一个信息
  // 重新设置：赋值
  fd.set("content", tinyMCE.activeEditor.getContent());
  // 图片
  let obj = $('#image').cropper('getCroppedCanvas', {
    width: 280,
    height: 280
  });
  // 得到图片对象
  obj.toBlob(function(blob) {
    fd.append("cover_img", blob);


    // 4.提交数据
    $.ajax({
      processData: false, //重要
      contentType: false, //重要
      url: "/my/article/add",
      type: "POST",
      data: fd,
      success: function(res) {
        if (res.status == 0) {
          layer.msg(res.message);


          // 产品设计：
          window.parent.document.querySelector("#list").click();
        }
      }
    })


  });





})